<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <script crossorigin="anonymous"
    integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g=="
    src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
  <script type="text/javascript" src="https://cdn.bootcss.com/xlsx/0.12.7/xlsx.core.min.js"></script>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
      border-collapse: collapse;
    }

    th,
    td {
      padding: 5px;
    }
  </style>
</head>

<body>
  <!-- 1.文件选择框 -->
  <input type="file" id="file01">
  <!-- 2.上传文件按钮 -->
  <button id="btnUpload">上传文件</button>
  <div class="progress" style="width: 500px;margin: 15px 10px;">
    <!--bootstrap进度条-->
    <!-- <div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">0%</div> -->
    <table id="demo01"></table>
  </div>

  <!-- <img src="./img/loading.gif" style="display: none;" alt="" id="loading"> -->
  <!-- 3.img标签，来选择上传文件后的图片 -->
  <img src="" alt="" id="img" width="800">

  <script>
    $('#btnUpload').on('click', function () {
      var files = $('#file01')[0].files[0];//文件对象
      var formData = new FormData();
      formData.append("file", files);  //上传一个files对象
      // formData.append("operatorId", operatorId);//需要上传的多个参数
      // console.log(files);
      var file_name = files['name'];//文件名称                        
      var index = file_name.lastIndexOf(".");
      if (index != -1) {
        file_format = file_name.substr(index + 1).toUpperCase();//文件格式后缀
        if (file_format != 'XLS' && file_format != 'XLSX') {
          alert("只能上传.xls和.xlsx类型的文件!");
        } else {
          $.ajax({
            //url: 'http://4v790e7259.zicp.vip/excel/upload', //切换接口地址
            url: 'http://localhost:8080/excel/upload', //切换接口地址
            // dataType: "json",
            type: "post",
            data: formData,
            processData: false,//不去处理发送的数据
            contentType: false,//不去设置Content-Type请求头
            //  contentType: "application/x-www-form-urlencoded; charset=utf-8",
            error: function (res) {
              alert(res.desc);
              return;
            },
            success: function (res) {
              alert(res.desc);
              return;
            }

          })



        }

      }


    });





  </script>
</body>

</html>